<!-- 如果vue3中需要使用js，得设置lang="ts" -->
<script setup lang="ts">
// js 写法，就算是在ts代码中，我们也可以写js
// js是在函数的参数中去指定
/** 
const props = defineProps({
  money: {
    type: Number, // js的类型大写
    required: true
  },
  car: {
    type: String,
    required: false,
    default: '奔驰'
  }
})
*/
// ts的基础类型是小写
// ts的写法是在泛型函数中写
// withDefaults这种指定默认值的写法用的少一些
// const props = withDefaults(defineProps<{money: number,car?: string}>(),{car: '奔驰'})
// console.log('---props---',props)

// 这种指定默认值用得多一些
const { money, car = '宝马' } = defineProps<{ money: number; car?: string }>()

// js中通过defineEmits来定义
// const emit = defineEmits(['changeMoney','changeCar'])

// ts中使用defineEmits
const emit = defineEmits<{
  // 定义触发自定义事件的函数，ts的基本类型是小写
  // e是event的小写，基本上都叫这个名字,val代表值，这个名字可以随意定义
  (e: 'changeMoney', val: number): void
  (e: 'changeCar', val: string): void
}>()

const change = () => {
  emit('changeMoney', 100)
  emit('changeCar', '马自达')
}
</script>

<template>
  <div>
    <p>car {{ car }},money {{ money }}</p>
    <p>
      <button @click="change">change</button>
    </p>
  </div>
</template>
